<template>
	<view>
		<dsl-navbar title="搜索" bgTopImg="white" isBack></dsl-navbar>
		<view class="search-cont">
			<view class="search">
				<input type="text" placeholder-class="inputclass" confirm-type="search" placeholder="请输入关键字"
					@confirm="seArch" v-model="keyword" />
			</view>
			<view class="search-code" @click="seArch()">搜索</view>
		</view>
		<view v-if="keyword.length =='' &&categoryList ==''" class="text-center text-sm padding text-gray">请输入搜索内容
		</view>

		<view class="padding margin-top bg-white radius ">
			<view class="shop_body" v-for="(item,index) in categoryList" :key='index' @click="shopDetail(item)">
				<view>
					<image :src="item.mainImg" mode="aspectFill"></image>
				</view>
				<view class="padding-left-sm" style="width: 400rpx;">
					<view class="align-center rowsb">
						<view class="title one_overflow">{{item.name}}</view>
						<view class="date">{{item.daysExplain}}</view>
					</view>
					<view class="content two_overflow margin-tb-sm">{{item.introduce}}</view>
					<view class="pay">￥{{item.price}}</view>
					<view class="flex justify-end">
						<view class="submit">立即购买</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		get_tourList,
	} from '../../common/path.js'
	export default {
		data() {
			return {
				keyword: '', //搜索内容
				pageSize: 10, //1页10条
				pageNum: 1, //一共几页
				categoryList: [], //数据列表
			}
		},
		onShow() {},
		watch: {
			keyword() {
				this.pageNum = 1
				this.get_tourList()
			}
		},

		methods: {
			//商品详情
			shopDetail(item) {
				uni.setStorageSync('shopId', item.id)
				uni.navigateTo({
					url: '/pages/shop/detail'
				})
			},

			//搜索
			get_tourList() {
				let addressId = uni.getStorageSync('addressId')
				let data = {
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					name: this.keyword,
					cityCode: addressId
				}
				this.Http.POST(get_tourList, JSON.stringify(data))
					.then((res) => {
						console.warn('[精选-景点]', res);
						if (res.code == 0) {
							if (this.pageNum == 1) {
								this.categoryList = res.data
							} else {
								this.categoryList.push(...res.data)
							}
						}
					})
			}
		}
	}
</script>

<style scoped lang="scss">
	.search {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		display: flex;
		flex-direction: row;
		background: #f8f8f8;
		border-top-left-radius: 50upx;
		border-bottom-left-radius: 50upx;
		border-bottom-right-radius: 50upx;
		margin-left: 20upx;
	}

	.search input {
		height: 70upx;
		line-height: 70upx;
		width: 100%;
		font-size: 30upx;
		color: #666666;
		padding-left: 30upx;
	}

	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		padding: 30upx 0;
	}

	.search-code {
		margin-left: 30rpx;
		margin-right: 30rpx;
		width: 150upx;
		height: 60upx;
		text-align: center;
		font-size: 30upx;
		color: white;
		border-radius: 999rpx;
		line-height: 60rpx;
		background-color: #19C175;
	}

	// 商品
	.shop_body {
		display: flex;
		position: relative;
		margin-top: 30rpx;

		image {
			width: 252rpx;
			height: 216rpx;
			background: #EEEEEE;
			opacity: 1;
			border-radius: 10rpx;
		}

		.title {
			width: 230rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #161617;
			opacity: 1;
		}

		.content {
			width: 312rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 33rpx;
			color: #B4B4B4;
			opacity: 1;
			margin-top: 10rpx;
			margin-bottom: 20rpx;
		}

		.pay {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #DE1010;
			opacity: 1;
		}

		.submit {
			width: 154rpx;
			height: 50rpx;
			background: linear-gradient(180deg, #29D5CB 0%, #38DFB0 100%);
			opacity: 1;
			border-radius: 35rpx;
			line-height: 50rpx;
			text-align: center;
			color: white;
			position: absolute;
			right: 0;
			bottom: 0;
		}

		.date {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #38DFB1;
			opacity: 1;
		}
	}
</style>
